<template>
  <div class="page">
    <div class="form" v-loading="loading">
      <div class="inputs">
        <h1>{{ VITE_NAME }}</h1>
        <el-form label-position="top" size="large" status-icon>
          <el-form-item prop="sn">
            <el-input disabled :placeholder="t('init.sn')" v-model="input" autocomplete="off" class="inputwidth" />
          </el-form-item>
        </el-form>
      </div>

      <div class="color-#666">{{ t('init.tip') }}</div>
      <div class="color-#666 m-y-10px">{{ t('init.tip1') }}</div>

      <div class="flex">
        <div class="ni">
          <div @click="ni('1')">1</div>
          <div @click="ni('2')">2</div>
          <div @click="ni('3')">3</div>
          <div @click="ni('4')">4</div>
          <div @click="ni('5')">5</div>
          <div @click="ni('6')">6</div>
          <div @click="ni('7')">7</div>
          <div @click="ni('8')">8</div>
          <div @click="ni('9')">9</div>
          <div @click="ni('00')">00</div>
          <div @click="ni('0')">0</div>
          <div @click="ni('T')">T</div>
        </div>
        <div class="submit">
          <div @click="clean">{{ $t('common.clean') }}</div>
          <div class="sure" @click="submit">{{ $t('common.sure') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { VITE_NAME } from '~/api/index'

const { t } = useI18n()

const loading = ref(false)
const input = ref('T2283062166133')
// const input = ref('')
const router = useRouter()

function submit() {
  if (input.value.length > 1)
    apis.api.employeeShopInfo({ sn: input.value }, loading).then(s => {
      if (s) {
        cache.setShop(s)
        router.replace('/login')
      } else {
        ElMessage.error(t('init.snError'))
      }
    })
}

function ni(n: string) {
  input.value = input.value + n
}
function clean() {
  input.value = ''
}
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-repeat: 'no-repeat';
  background-size: 100% 100%;
}

.form {
  box-sizing: border-box;
  border-radius: 30px;
  background-color: #ffffff;
  overflow: hidden;
  width: 700px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 30px;

  h1 {
    text-align: center;
  }

  .inputs {
    flex: 1;
  }

  h1,
  ::v-deep(.el-form-item) {
    margin-bottom: 32px;
  }
}

.ni {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 330px;
}
.ni,
.submit {
  div {
    cursor: pointer;
    border-radius: 4px;
    background-color: #f6f6f6;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0 10px 10px 0;
    &:active {
      background-color: #3aa1a2;
      color: #fff;
    }
  }
}
.submit {
  .sure {
    line-height: 100px;
    height: 100px !important;
  }
}
</style>
